<template>
    <div class="GPLOT-Options" :style="{width : OptionWidth + 'px'}">
        <div class="GPLOT-Options-tabs">
            <div class="GPLOT-Options-tabs-name" :class="{'active' : optionState== 'form' }" @click="optionState = 'form'">属性</div>
            <div class="GPLOT-Options-tabs-name" :class="{'active' : optionState== 'history' }" @click="optionState = 'history'">历史记录</div>
            <div class="GPLOT-Options-tabs-name" :class="{'active' : optionState== 'layers' }" @click="optionState = 'layers'">图层</div>
        </div>
        <div class="GPLOT-Options-body">
            <Form v-if="optionState == 'form'" />
            <Layer v-else-if="optionState == 'layers'" />
            <History v-else-if="optionState == 'history'" />
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Form from './OptionViews/Form.vue'
import Layer from './OptionViews/Layer.vue'
import History from './OptionViews/History.vue'

export default {
    components: {
        Form,
        Layer,
        History,
    },
    computed: {
        ...mapState("layout", {
            OptionWidth: state => state.OptionWidth,
        }),
    },
    data() {
        return {
            optionState: 'form',
        }
    }
}
</script>